<template>
    <div>
        <el-card class="MsgContent">
            <div class="box">
                <img :src="userStore.avatar" class="avatar">
                <div class="bottom">
                    <h3 class="title">{{ getTime() }}{{ userStore.username }}, 开始你一天的工作吧！</h3>
                    <p class="subtitle">{{ setting.title }}</p>
                </div>
            </div>
        </el-card>
        <el-card class="DisplayData" shadow="never">
            <el-row :gutter="20" style=" margin: -15px -20px -35px -20px;">
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <div class="left">
                            <div class="icon">
                                <svg-icon name="peoples" color="#40c9c6" width="600px" height="300px"></svg-icon>
                            </div>
                        </div>
                        <div class="right">
                            <div class="keyInfo">新增用户</div>
                            <div class="keyInfo keyNum" v-countup="102400"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <div class="left">
                            <div class="icon">
                                <svg-icon name="message" color="#36a3f7" width="600px" height="300px"></svg-icon>
                            </div>
                        </div>
                        <div class="right">
                            <div class="keyInfo">未读消息</div>
                            <div class="keyInfo keyNum" v-countup="81212"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <div class="left">
                            <div class="icon">
                                <svg-icon name="money" color="#f4516c" width="600px" height="300px"></svg-icon>
                            </div>
                        </div>
                        <div class="right">
                            <div class="keyInfo">成交金额</div>
                            <div class="keyInfo keyNum" v-countup="9280"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <div class="left">
                            <div class="icon">
                                <svg-icon name="shopping" color="#34bfa3" width="600px" height="300px"></svg-icon>
                            </div>
                        </div>
                        <div class="right">
                            <div class="keyInfo">购物总量</div>
                            <div class="keyInfo keyNum" v-countup="13600"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <div class="icon">
            <svg-icon name="welcome" width="600px" height="300px"></svg-icon>
        </div>
    </div>
</template>

<script setup lang="ts">
// 引入用户相关的小仓库(用于获取用户头像、昵称)
import useUserStore from '@/store/modules/user'
// 引入登录时间判断函数
import { getTime } from '@/utils/time'
// 引入项目标题的配置
import setting from '@/setting'

// 获取用户相关小仓库
const userStore = useUserStore()
</script>

<style scoped lang="scss">
.box {
    display: flex;
    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .bottom {
        margin-left: 20px;
        .title {
            font-size: 25px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 30px;
        }
        .subtitle {
            // color: #000;
            font-weight: bold;
            // font-style: italic;
        }
    }
}
.icon {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

// 新增图表
.MsgContent {
    margin-bottom: 15px;
}
.DisplayData {
    border: 0px solid transparent;
}
.el-col {
  flex: 1;
  margin-right: 20px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-sizing: border-box;

  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  // padding: 13px;

  &:hover {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    .left {

      .icon svg {
        width: 45px !important;
        height: 40px !important;
        fill: #fff !important;
      }
    }
  }

  &:last-child {
    margin-right: 0;
  }
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  flex: 1;
  margin-right: 10px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.el-col:last-child {
    margin-right: 0px !important;
}
.el-col:hover {
    box-shadow: 0px 0px 12px rgba(0,0,0,.12);
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}
.left {
    display: flex;
    align-items: center;
}
.right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.keyInfo {
    line-height: 40px;
    --un-text-opacity: 1;
    color: rgb(107 114 128 / var(--un-text-opacity));
}
.keyNum {
    color: #303133;
    font-size: 20px;
    font-weight: 700;
}
.left .icon svg {
    margin-top: -30px;
    width: 35px !important;
    height: 30px !important;
    transition: all 0.3s ease;
}
</style>

<!-- 测试代码
引入组合式API函数的生命周期函数
import { onMounted } from 'vue'
import useUserStore from '@/store/modules/user'

获取仓库
const userStore = useUserStore()
首页挂载完毕就发送请求获取用户信息
onMounted(() => {
    userStore.userInfo()
}) -->